<template>
    <!-- 新增/编辑用户 -->
    <el-drawer
        v-model="userParams.visible"
        :title="dialogTitle"
        @open="handleOpen"
        size="800"
        :close-on-click-modal="true"
    >
        <!-- {{ formData }} -->
        <div class="drawer-main" v-loading="loading">
            <div class="topFrom">
                <div class="titel">基本信息</div>
                <el-form ref="ruleFormRef" :model="formData" label-width="120">
                    <el-row gutter="20">
                        <!-- 姓名 -->
                        <el-col :span="20">
                            <el-form-item label="姓名" prop="userName">
                                <el-input
                                    v-model.trim="formData.userName"
                                    disabled
                                    maxlength="150"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="topFrom">
                <div class="titel">编辑内容</div>
                <el-form
                    ref="ruleFormRefJuese"
                    :model="formDataJueSe"
                    :rules="rulesJueSe"
                    label-width="120"
                >
                    <el-row gutter="22">
                        <!-- 销售等级 -->
                        <el-col :span="11">
                            <el-form-item label="销售级别" prop="salesLevel">
                                <el-select
                                    v-model="formDataJueSe.salesLevel"
                                    clearable
                                    placeholder="请选择销售等级"
                                >
                                    <el-option
                                        v-for="item in salesLevels"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 是否组长 -->
                        <el-col :span="11">
                            <el-form-item label="是否组长" prop="groupLeader">
                                <el-select
                                    v-model="formDataJueSe.groupLeader"
                                    clearable
                                    placeholder="请选择是否组长"
                                >
                                    <el-option
                                        v-for="item in leaderStatuses"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="emit('close')">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { postUserEdit } from './api'

const props = defineProps({
    userParams: {
        type: Object,
        default: () => {},
        required: true
    }
})
// 定义销售级别标签数据
const salesLevels = ref([
    { value: '1', label: '入门级' },
    { value: '2', label: '初级' },
    { value: '3', label: '中级' },
    { value: '4', label: '专家级' }
])

// 定义组长状态标签数据
const leaderStatuses = ref([
    { value: 0, label: '否' },
    { value: 1, label: '是' }
])

const emit = defineEmits(['close'])

const formData = reactive({})
const ruleFormRef = ref(null)

const loading = ref(false)
const dialogTitle = '编辑用户信息'

const ruleFormRefJuese = ref(null)
const formDataJueSe = reactive({})

const rulesJueSe = reactive({
    salesLevel: [
        { required: true, message: '请选择销售等级', trigger: 'change' }
    ],
    groupLeader: [
        { required: true, message: '请选择是否组长', trigger: 'change' }
    ]
})

const handleSubmit = () => {
    handleSave()
}
const handleSave = () => {
    ruleFormRefJuese.value.validate(async (valid) => {
        if (valid) {
            try {
                let obj = {
                    id: props.userParams.row.id,
                    userId: props.userParams.row.userId,
                    salesLevel: formDataJueSe.salesLevel,
                    groupLeader: formDataJueSe.groupLeader
                }
                loading.value = true
                const res = await postUserEdit(obj)
                if (res?.code === 200) {
                    ElMessage.success('保存成功')
                    loading.value = false
                    emit('close', true)
                }
            } catch (error) {
                console.error('Request error:', error)
            }
        } else {
            return false
        }
    })

    loading.value = false
}

// 初始化弹窗
const handleOpen = () => {
    nextTick(() => {
        ruleFormRefJuese.value.resetFields()
        // deptOptions.value = props.userParams.deptOptions
        let row = props.userParams.row
        // 编辑
        formData.userName = row.userName
        formDataJueSe.salesLevel = row.salesLevel
        formDataJueSe.groupLeader = row.groupLeader
        console.log('初始化')
    })
}
</script>

<style lang="less" scoped>
.titel {
    width: 100%;
    height: 60px;
    padding: 0 10px;
    line-height: 60px;
    color: #0a0a0a;
    font-weight: 600;
    font-size: 14px;
    position: relative;
}
.titel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 5px;
    border-radius: 10px;
    background-color: #1943ff;
}
.titleFrom {
    width: 100%;
}
.tablePadding {
    padding: 0 20px;
}
</style>
